<template>
  <el-container>
    <el-header class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="0">
          <div class="logo">
            <img
              style="height: 50px"
              src="https://smart-paste.gitee.io/ipaste-site/assets/icon-512x512.png"
              alt="Element logo"
            />
            <h1>Clipboard Assistant</h1>
          </div>
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="1">Home</el-menu-item>
        <!-- 使用教程 -->
        <el-menu-item index="2">Tutorial</el-menu-item>
        <!-- Contact -->
        <el-menu-item index="3">Contact</el-menu-item>
        <!-- 关于我们 -->
        <el-menu-item index="4">About</el-menu-item>
        <el-sub-menu index="2">
          <template #title>English</template>
          <el-menu-item index="2-1">中文</el-menu-item>
          <el-menu-item index="2-2">item two</el-menu-item>
          <el-menu-item index="2-3">item three</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-main>
      <div class="tab-home" v-if="tabHomeVisible">
        <div class="title">
          <span style="font-size: 40px; margin-top: 20px; font-weight: bold">
            Welcome to iPaste - Clipboard Assistant
          </span>
          <p style="font-size: 20px">
            A simple and easy-to-use clipboard assistant.
          </p>
        </div>
        <!-- 多图片展示 -->
        <div class="carousel-container">
          <el-carousel :interval="4000" height="550px" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
              <el-image
                :src="'https://smart-paste.gitee.io/ipaste-site/assets/images/user-guide/en/' + item + '.jpg'"
                :fit="'cover'"
                alt="carousel"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- The clipboard as it should be -->

        <div class="clipboard">
          <div class="clipboard-title">
            <h2 style="font-size: 40px">The clipboard as it should be</h2>
          </div>
          <div
            style="display: flex; justify-content: center; margin-top: -20px"
          >
            <p class="clipboard-content">
              iPaste is the next-generation clipboard management tool that
              offers unprecedented efficiency and functionality. It can record
              everything you copy or cut and save it in a history list. Quickly
              accessing your clipboard history enhances your productivity.
            </p>
          </div>
        </div>
      </div>
      <div
        id="tab-tutorial"
        class="tab-tutorial"
        v-if="tabTutorialVisible"
        ref="tourialDiv"
      >
        <!-- 嵌入iframe，链接百度 -->
        <iframe
          src="https://smart-paste.gitee.io/ipaste-site/guid-macos"
          ref="tutorialIframe"
          frameborder="0"
          style="width: 60%; height: 150vh"
          id="myIframe"
        ></iframe>
      </div>
    </el-main>
    <el-footer class="footer">
      <div class="copyright">
        Copyright © 2023 Orange Team. All rights reserved.
      </div>
    </el-footer>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
      <p>If you have any questions or suggestions, please contact us.</p>
      <p>email: fredxsc@foxmail.com</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Ok,I got it!
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script lang="ts" setup>
import {   onMounted, ref } from "vue";
 

const dialogVisible = ref(false);

const tabHomeVisible = ref(true);
const tabTutorialVisible = ref(false);
const tabContactVisible = ref(false);
const tabAboutVisible = ref(false);
 
// 使用 ref 创建 tutorialIframe
const tutorialIframe = ref(null);
const tourialDiv = ref(null);

const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  if (key === "1") {
    tabHomeVisible.value = true;
    tabTutorialVisible.value = false;
    tabContactVisible.value = false;
    tabAboutVisible.value = false;
  } else if (key === "2") {
    tabHomeVisible.value = false;
    tabTutorialVisible.value = true;
    tabContactVisible.value = false;
  } else if (key === "3") {
    dialogVisible.value = true;
  }
};
 

// 生命周期钩子
onMounted(() => {
  // 组件挂载时执行的逻辑
  //   updateTabHeight();

  function setIframeHeight() {
    console.log("setIframeHeight.....");
    var iframe = document.getElementById("myIframe");
    if (iframe) {
      const htmlIFrameElement = iframe as HTMLIFrameElement;
      if (htmlIFrameElement.contentWindow) {
        iframe.style.height =
          htmlIFrameElement.contentWindow.document.body.scrollHeight + "px";
        console.log("iframe.style.height:" + iframe.style.height);
      }
    }
  }
  // 在iframe内容加载完成后调用setIframeHeight
  if (document.getElementById("myIframe")) {
    (document.getElementById("myIframe") as HTMLIFrameElement).onload =
      setIframeHeight;
  }
});
</script>

<style scoped>
/* 水平布局 */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-grow {
  flex-grow: 1;
}

.tab-home {
  margin-top: -5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-tutorial {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 防止 iframe 溢出 */
}

.carousel-container {
  width: 70%;
}

.clipboard-content {
  width: 70%;
}

.right-align {
  float: right !important;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.copyright {
  text-align: center;
  margin-top: 15px;
}
</style>
